 @import '../common/var.scss';
 @import './function.scss';
 @import './config.scss';


 //  unquote($query)：删除字符串中的引号；
 //  quote($query)：给字符串添加引号。
 // inspect($query) Maps不能转换为纯CSS。作为变量的值或参数传递给CSS函数将会导致错误。
 // 使用inspect($query) 函数以产生输出字符串复制代码

 //bem 混入拼接字符串

 @mixin b($block) {
     $B: $namespace+'-'+$block !global;

     .#{$B} {
         @content;
     }
 }



 @mixin e($element) {
     $E              : $element !global;
     $selector       : &;
     $currentSelector: "";

     @each $unit in $element {
         $currentSelector: #{$currentSelector + "." + $B + $element-separator + $unit + ","};
     }

     @if hitAllSpecialNestRule($selector) {
         @at-root {
             #{$selector} {
                 #{$currentSelector} {
                     @content;
                 }
             }
         }
     }

     @else {
         @at-root {
             #{$currentSelector} {
                 @content;
             }
         }
     }
 }

 @mixin m($modifier) {
     $selector       : &;
     $currentSelector: "";

     @each $unit in $modifier {
         $currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ","};
     }

     @at-root {
         #{$currentSelector} {
             @content;
         }
     }
 }


 @mixin when($state) {
     @at-root {
         &.#{$state-prefix + $state} {
             @content;
         }
     }
 }



 //自定义混入
 @mixin cssbg($width, $height, $imgurl) {
     background-image   : url($imgurl);
     background-repeat  : no-repeat;
     background-position: center 0;
     background-size    : cover;
     width              : $width;
     height             : $height;
 }




 // 自定义按钮混入
 @mixin btn($type) {
     @if $type==varietycolorbtn {
         position       : relative;
         z-index        : 2;
         width          : 200px;
         height         : 60px;
         line-height    : 60px;
         font-style     : 24px;
         text-align     : center;
         text-decoration: none;
         font-family    : sans-serif;
         box-sizing     : border-box;
         background     : linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
         background-size: 400%;
         border-radius  : 30px;
         letter-spacing : 4px;

         &:hover {
             animation: varietycolorbtn 8s linear infinite;
         }

         &::before {
             content        : '';
             position       : absolute;
             top            : -5px;
             left           : -5px;
             right          : -5px;
             bottom         : -5px;
             z-index        : -1;
             background     : linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
             background-size: 400%;
             border-radius  : 40px;
             filter         : blur(20px);
             opacity        : 0;
             transition     : 1;
         }

         &:hover::before {
             filter   : blur(20px);
             opacity  : 1;
             animation: varietycolorbtn 8s linear infinite;
         }

         a {
             text-transform: uppercase;
             color         : #ffffff;
             font-weight   : 600;
         }
     }

     @else if $type==clickripplebtn {
         >div {
             position      : relative;
             padding       : 24px 100px;
             margin        : 10px;
             border-radius : 40px;
             letter-spacing: 2px;
             text-transform: uppercase;
             color         : #ffffff;
             font-weight   : 600;
             background    : linear-gradient(90deg, #0162c8, #55e7fc);
             overflow      : hidden;
             letter-spacing: 4px;

             span {
                 position        : absolute;
                 background-color: #ffffff;
                 transform       : translate(-50%, -50%);
                 pointer-events  : none;
                 border-radius   : 50%;
                 animation       : clickripplebtn 1s linear infinite;
             }
         }

         >div:nth-child(2) {
             background: linear-gradient(90deg, #775bea, #ff72c0);
         }
     }


     @else if $type==shadowbtn {
         >div {
             padding       : 24px 72px;
             border-radius : 40px;
             letter-spacing: 2px;
             text-transform: uppercase;
             color         : #5a84a2;
             font-weight   : 600;
             font-size     : 18px;
             box-shadow    : -2px -2px 8px rgba(255, 255, 255, 1),
                 -2px -2px 12px rgba(255, 255, 255, 0.5),
                 inset 2px 2px 4px rgba(255, 255, 255, 0.1),
                 2px 2px 8px rgba(0, 0, 0, 0.15);

             &:hover {
                 box-shadow: inset -2px -2px 8px rgba(255, 255, 255, 1),
                     inset -2px -2px 12px rgba(255, 255, 255, 0.5),
                     inset 2px 2px 4px rgba(255, 255, 255, 0.1),
                     inset 2px 2px 8px rgba(0, 0, 0, 0.15);
             }

             &:hover span {
                 transform: scale(0.98);
             }
         }
     }


     @else if $type==linebtn {
         >div {
             position      : relative;
             padding       : 24px 72px;
             letter-spacing: 2px;
             text-transform: uppercase;
             color         : #1670f0;
             font-weight   : 600;
             font-size     : 32px;
             box-shadow    : 0 20px 50px rgba(0, 0, 0, .5);
             letter-spacing: 4px;
             overflow      : hidden;

             &::before {
                 content   : '';
                 position  : absolute;
                 left      : 2px;
                 top       : 2px;
                 bottom    : 2px;
                 width     : 50%;
                 background: rgba(255, 255, 255, 0.05);
             }

             span:nth-child(1) {
                 position  : absolute;
                 top       : 0px;
                 left      : 0px;
                 width     : 100%;
                 height    : 2px;
                 background: linear-gradient(to right, #0c002b, #1779ff);
                 animation : btnline1 2s linear infinite;
             }

             span:nth-child(2) {
                 position       : absolute;
                 top            : 0px;
                 right          : 0px;
                 width          : 2px;
                 height         : 100%;
                 background     : linear-gradient(to bottom, #0c002b, #1779ff);
                 animation      : btnline2 2s linear infinite;
                 animation-delay: 1s;
             }

             span:nth-child(3) {
                 position  : absolute;
                 bottom    : 0px;
                 left      : 0px;
                 width     : 100%;
                 height    : 2px;
                 background: linear-gradient(to left, #0c002b, #1779ff);
                 animation : btnline3 2s linear infinite;
             }

             span:nth-child(4) {
                 position       : absolute;
                 top            : 0px;
                 left           : 0px;
                 width          : 2px;
                 height         : 100%;
                 background     : linear-gradient(to top, #0c002b, #1779ff);
                 animation      : btnline4 2s linear infinite;
                 animation-delay: 1s;
             }
         }

     }


     @else if $type==filterbtn {
         >div {
             padding         : 24px 72px;
             // border-radius: 40px;
             letter-spacing  : 2px;
             text-transform  : uppercase;
             color           : #2196f3;
             font-weight     : 600;
             font-size       : 18px;
             transition      : 0.2s;
             letter-spacing  : 4px;
             position        : relative;
             overflow        : hidden;

             &:hover {
                 color           : #255784;
                 background      : #2196f3;
                 box-shadow      : 0 0 10px #2196f3, 0 0 40px #2196f3, 0 0 80px #2196f3;
                 transition-delay: 1s;
             }

             span {
                 position: absolute;
                 display : block;
             }

             span:nth-child(1) {
                 top       : 0;
                 left      : -100%;
                 width     : 100%;
                 height    : 2px;
                 background: linear-gradient(90deg, transparent, #2196f3);
             }

             &:hover span:nth-child(1) {
                 left      : 100%;
                 transition: 1s;
             }

             span:nth-child(3) {
                 bottom    : 0;
                 right     : -100%;
                 width     : 100%;
                 height    : 2px;
                 background: linear-gradient(270deg, transparent, #2196f3);
             }

             &:hover span:nth-child(3) {
                 right           : 100%;
                 transition      : 1s;
                 transition-delay: 0.5s;
             }

             span:nth-child(2) {
                 top       : -100%;
                 right     : 0%;
                 width     : 2px;
                 height    : 100%;
                 background: linear-gradient(180deg, transparent, #2196f3);
             }

             &:hover span:nth-child(2) {
                 top             : 100%;
                 transition      : 1s;
                 transition-delay: 0.25s;
             }

             span:nth-child(4) {
                 top       : 100%;
                 left      : 0%;
                 width     : 2px;
                 height    : 100%;
                 background: linear-gradient(360deg, transparent, #2196f3);
             }

             &:hover span:nth-child(4) {
                 top             : -100%;
                 transition      : 1s;
                 transition-delay: 0.75s;
             }

         }
     }


     @else if $type==Flipbtn3d {
         >div {
             width          : 200px;
             height         : 60px;
             line-height    : 60px;
             letter-spacing : 2px;
             text-transform : uppercase;
             font-weight    : 600;
             font-size      : 18px;
             letter-spacing : 4px;
             position       : relative;
             transform-style: preserve-3d;
             perspective    : 1000px;

             span {
                 position           : absolute;
                 left               : 0;
                 top                : 0;
                 width              : 100%;
                 height             : 100%;
                 display            : block;
                 text-align         : center;
                 background         : rgba(255, 255, 255, 0.05);
                 transform-style    : preserve-3d;
                 backface-visibility: hidden;
                 border-radius      : 30px;
                 text-transform     : uppercase;
                 color              : #ffffff;
                 transition         : 1s;
             }

             span.front {
                 transform: rotateX(0) translateZ(20px);
             }

             &:hover span.front {
                 transform: rotateX(-180deg) translateZ(20px);
             }

             span.back {
                 transform: rotateX(180deg) translateZ(20px);
             }

             &:hover span.back {
                 transform: rotateX(0deg) translateZ(20px);
             }

             span.center {
                 background: linear-gradient(to left, #c31a5b, #7129bd);
             }

             span.center:before {
                 content      : '';
                 position     : absolute;
                 top          : 0;
                 left         : 0;
                 width        : 100%;
                 height       : 100%;
                 background   : linear-gradient(to left, #ffdd1f, #c31a5b);
                 border-radius: 30px;
                 transform    : translateZ(-1px);
             }

             &:hover span.center {
                 transform: rotateX(-180deg);
             }
         }
     }

     @else if $type==HoverEffects {
         >div {
             position      : relative;
             padding       : 24px 72px;
             letter-spacing: 2px;
             text-transform: uppercase;
             color         : #ffffff;
             font-weight   : 600;
             font-size     : 18px;
             transition    : 0.2s;
             letter-spacing: 4px;
             z-index       : 0;

             &:before {
                 content         : '';
                 position        : absolute;
                 top             : 0;
                 left            : 0;
                 width           : 100%;
                 height          : 100%;
                 background-color: #03a9f4;
                 z-index         : -1;
                 transition      : transform 0.5s;
                 transform-origin: bottom right;
                 transform       : scale(0);
             }

             &:hover::before {
                 transition      : transform 0.5s;
                 transform-origin: top left;
                 transform       : scale(1);
             }

             &:after {
                 content         : '';
                 position        : absolute;
                 top             : 0;
                 left            : 0;
                 width           : 100%;
                 height          : 100%;
                 background      : transparent;
                 border          : 2px solid #ffffff;
                 box-sizing      : border-box;
                 z-index         : -1;
                 transition      : transform 0.5s;
                 transform-origin: top left;
                 transform       : scale(1);
             }

             &:hover::after {
                 transition      : transform 0.5s;
                 transform-origin: bottom right;
                 transform       : scale(0);
             }
         }
     }


     @else if $type==movebtn {
         >div {
             padding         : 24px 72px;
             letter-spacing  : 2px;
             text-transform  : uppercase;
             background-color: #fff;
             font-weight     : 600;
             font-size       : 20px;
             letter-spacing  : 4px;
             border          : 2px solid #000000;
             position        : relative;
             overflow        : hidden;

             span {
                 font-size     : 20px;
                 color         : #fff;
                 mix-blend-mode: difference;
             }

             &::before {
                 content   : '';
                 position  : absolute;
                 top       : 0;
                 left      : 0;
                 height    : 100%;
                 width     : 60px;
                 background: #000000;
                 transition: .5s;
                 transform : skewX(-15deg);
                 animation : movebtn 2s linear infinite;
             }

         }

     }



     @else if $type==bxg {
         >div {
             padding         : 12px 72px;
             letter-spacing  : 2px;
             text-transform  : uppercase;
             background-color: #fff;
             font-weight     : 600;
             font-size       : 20px;
             letter-spacing  : 4px;
             position        : relative;
             overflow        : hidden;
             text-align      : center;
             width           : 600px;
             background-color: #25c48b;


             span:nth-child(1) {
                 position  : absolute;
                 top       : 0px;
                 left      : 0px;
                 width     : 100%;
                 height    : 2px;
                 background: linear-gradient(to right, #0c002b, #1779ff);
                 animation : btnline1 2s linear infinite;
             }

             span:nth-child(2) {
                 position       : absolute;
                 top            : 0px;
                 right          : 0px;
                 width          : 2px;
                 height         : 100%;
                 background     : linear-gradient(to bottom, #0c002b, #1779ff);
                 animation      : btnline2 2s linear infinite;
                 animation-delay: 1s;
             }

             span:nth-child(3) {
                 position  : absolute;
                 bottom    : 0px;
                 left      : 0px;
                 width     : 100%;
                 height    : 2px;
                 background: linear-gradient(to left, #0c002b, #1779ff);
                 animation : btnline3 2s linear infinite;
             }

             span:nth-child(4) {
                 position       : absolute;
                 top            : 0px;
                 left           : 0px;
                 width          : 2px;
                 height         : 100%;
                 background     : linear-gradient(to top, #0c002b, #1779ff);
                 animation      : btnline4 2s linear infinite;
                 animation-delay: 1s;
             }

           

         }

     }
 }